iT邦幫忙

2023 iThome 鐵人賽

DAY 22
0
Mobile Development

用30天學習做出我的第一個Flutter App系列 第 22

Day22 [Flutter] Widget( 3 )

  • 分享至 

  • xImage
  •  
  • Container

Container是用來建一個矩形的容器,只能放一個Widget,如果要調整這個Widget的風格、尺寸、排列,就可以用Container來處理。

屬性 | 功能 | 值
------------- | -------------
child | 放置內部的widget | Container(child: Text('Hello, Container!'))
width、height | 設置容器的寬度、高度,可以使用像素、百分比或double值設置 | width: 200.0,height: 100.0
color | 容器背景顏色 | color: Colors.blue
decoration | 裝飾容器,包括背景、邊框(border)、陰影 | 調整容器圓角:decoration: BoxDecoration(borderRadius: BorderRadius.circular(10.0),)
alignment | 內部widget的對齊方式 | alignment:Alignment(x,y),x是水平方向的對齊方向;y是垂直方向的對齊方向,範圍從-1到1,置中是(0,0)
padding | 內邊距 | padding: EdgeInsets.all(16.0)
margin | 外邊距 | margin: EdgeInsets.all(16.0)
constraints | 設置容器的約束條件,如最大寬度、最小高度等等 | 設置最小高度及寬度:constraints: BoxConstraints(minWidth: 100.0,minHeight: 50.0)
clipBehavior | 控制是否裁剪容器內的widget | 不裁剪:Clip.none 裁剪邊緣為銳利:Clip.hardEdge
transform | 對widget進行旋轉、平移、縮放等操作 | 平移:Matrix4.translationValues(x,y,z) 旋轉:Matrix4.rotationZ(math.pi / 4))(對Z軸旋轉45度) 縮放:Matrix4.diagonal3Values(x,y,z)

  • Row 和 Column

在flutter中所看到UI元件都是widget,所以連佈局也是widget,Row和Column就是分別用來創建水平和垂直佈局的widget。Row和Column都可以使用children來放置多個widget

屬性 | 功能 | 值
------------- | -------------
mainAxisAlignment | 控制widget在主軸上的對齊方式 | MainAxisAlignment.start(默認值,在起始位置對齊)、MainAxisAlignment.center、MainAxisAlignment.end
crossAxisAlignment | 控制widget在與主軸垂直方向上的對齊方式| CrossAxisAlignment.start(默認值,在起始位置對齊)、CrossAxisAlignment.center、CrossAxisAlignment.end
mainAxisSize | 控制Row、Column在主軸上的尺寸 | MainAxisSize.max(默認值,容器會在主軸上占用所有可用的空間)。MainAxisSize.min(盡可能少的空間,容器大小會隨著內部widget大小改變)

  • ListView

ListView是用來創建可滾動的列表內容。

屬性 | 功能 | 值
------------- | -------------
children | ListView的主要屬性,用來添加要在列表中顯示的Widget | ListView(children: [ListTile(...),ListTile(...)])
scrollDirection | 設置滾動方向,默認是垂直方向 | Axis.vertical、Axis.horizontal
physics | 滾動物理效果 | 不可滾動:NeverScrollableScrollPhysics,Android風格:ClampingScrollPhysics(),iOS風格:BouncingScrollPhysics()

參考資料:
https://openhome.cc/Gossip/Flutter/Container.html


上一篇
Day21 [Flutter] Widget( 2 )
下一篇
Day23 [Flutter] Widget( 4 )
系列文
用30天學習做出我的第一個Flutter App30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言